import React, {Component} from 'react';
import {Button, InputItem, List, Modal, NoticeBar, Toast, WingBlank} from 'antd-mobile';
import './Scan.less';
import AddressSelector, {ADDRESS_DELIMITER, asOptions} from "../commons/AddressSelector";
import {fetchAllCities} from "../../api/city";
import {saveDevice} from '../../api/deviceApi';

class Scan extends Component {
    state = {
        sn: '',
        valid: false,
        cities: [],
        citiesDeep: 0,
        selectedCity: '',
        selectedCityCode: '',
        inputName: '',
    };

    componentDidMount() {
        const {sn} = this.props.match.params;
        const valid = this.checkSn(sn);
        this.setState({
            sn: sn,
            valid: valid,
        });
        fetchAllCities().then(res => {
            const ctx = [];
            const cols = asOptions(res, ctx, 0);
            this.setState({
                cities: ctx,
                citiesDeep: cols,
            });
        });
    }

    checkSn(sn) {
        const r = /^[A-Za-z0-9]+$/g;
        const res = r.test(sn);
        if (res) {
            return true;
        }
        Toast.show('该二维码不合法', 3, false);
        return false;
    }

    onCityChange = items => {
        const cityCode = items.pop();
        const city = items.join(ADDRESS_DELIMITER);
        this.setState({
            selectedCity: city,
            selectedCityCode: cityCode,
        });
    };
    onNameChange = name => {
        this.setState({
            inputName: name,
        });
    };
    saveDevice = () => {
        const {selectedCityCode, selectedCity, inputName, sn, valid} = this.state;
        if (!selectedCity || !selectedCityCode || !inputName) {
            Toast.show('请完善信息', 3, false);
            return;
        }
        if (!valid) {
            Toast.show('无效设备', 3, false);
            return;
        }
        const device = {
            sn: sn,
            deviceName: inputName,
            addressCode: selectedCityCode,
            address: selectedCity
        };
        const _this = this;
        saveDevice(device).then(res => {
            Modal.alert(res.deviceName, '认领成功', [{
                text: '查看设备', onPress: () => {
                    const {history} = _this.props;
                    history.replace({pathname: '/'});
                }
            }]);
        });
    };

    render() {
        const {valid, sn, citiesDeep, cities, selectedCity} = this.state;
        return (
            <div className="scan-result">
                {valid ? null : <NoticeBar>该二维码不规范</NoticeBar>}
                <div className="title">设备序列号</div>
                <div className="sn">{sn}</div>
                <List renderHeader="设备信息">
                    <InputItem onChange={this.onNameChange}>名称</InputItem>
                    <AddressSelector value={selectedCity}
                                     onChange={this.onCityChange}
                                     cols={citiesDeep}
                                     options={cities}
                                     delimiter={ADDRESS_DELIMITER}/>
                </List>
                <WingBlank>
                    <Button type="primary" disabled={!valid} onClick={this.saveDevice}>保存</Button>
                </WingBlank>
            </div>
        );
    }
}

export default Scan;